

<template>
<footer class="footer">
    <router-link to="/">
    <i class="icon-home"></i><span>首页</span>
    </router-link>
    <router-link to="/variety">
    <i class="icon-variety"></i><span>分类</span>
    </router-link>
    <router-link to="/cart">
    <i class="icon-cart"></i><span>购物车</span>
    </router-link>
    <router-link to="/mine">
    <i class="icon-mine"></i><span>我的</span>
    </router-link>
</footer>


</template>
<script>
export default {

}
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: px2rem(98);
//   background: gray;
  border-top: 1px solid #dddddf;
  background: #fff;
  .router-link-exact-active.router-link-active {
    .icon {
      &-home {
        @include hoverImage("home");
      }
      &-variety {
        @include hoverImage("classify");
      }
      &-mine {
        @include hoverImage("my");
      }
      &-cart {
        @include hoverImage("cart");
      }
    }
    span {
      color: $basic-color;
    }
  }
  a {
      display: flex;
      flex-direction: column;
      width: 25%;
      align-items: center;
      justify-content: space-around;
    .icon {
      &-home {
        @include staticImage("home");
      }
      &-variety {
        @include staticImage("classify");
      }
      &-mine {
        @include staticImage("my");
      }
      &-cart {
        @include staticImage("cart");
      }
    }
    i {
        transform: scale(0.7);
    }
    span {
        font-size: 1.2em;
    }
  }
}
</style>


